<template>
    <div class="header">
      <el-button class="back" @click="goBack">
        <el-icon>
          <ArrowLeft />
        </el-icon>
      </el-button>
      <p class="title">{{ title }}</p>
    </div>
</template>

<script setup>
import { ArrowLeft } from '@element-plus/icons-vue';
import { defineProps } from 'vue';
import router from '../router/index.js'; // 确保路径正确
const props = defineProps({
  title: {
    type: String,
    required: true
  }
});
const emit = defineEmits(['goBack']);
const goBack = () => {
  emit('goBack');
};
</script>

<style scoped>
.header {
  height: 8vh;
  width: 100%;
  background-color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back {
  position: absolute;
  left: 0;
  top: 3vh;
  border: none;
  font-size: 24px;
  background: transparent;
}

.title {
  position: relative;
  top: 1vh;
}
</style>